<template>
  <div class="singer-item">
    <div class="s-img">
      <img class="auto-img" :src="singerData.picUrl" alt="">
    </div>
    <div class="s-name">
      <span>{{ singerData.name }}</span>&nbsp;&nbsp;
      <span>{{singerData.singerName}}</span>
    </div>
    <div class="pi" v-if="isPlayIcon" @click="changeAudioId(singerData)">
      <span class="iconfont" :class="[currentAudioInfo.audioId === singerData.id && isPlay ? 'icon-zanting' : 'icon-bofang']"></span>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  name: 'ListItem',
  props: {
    //歌手或者歌曲的数据
    singerData: {
      type: Object,
      default() {
        return {};
      }

    },

    //控制播放图标的显示和隐藏
    isPlayIcon: {
      type: Boolean,
      default: false
    }

  },

  computed: {
    ...mapState(['currentAudioInfo', '$audio', 'isPlay'])
  },
  created(){
      
  },

  methods: {

    ...mapMutations(['setAudioId']),

    //修改音频id
    changeAudioId() {

      //   

      //判断当前音频的id是否和点击播放的音频id一致
      if(this.currentAudioInfo.audioId === this.singerData.id) {
          

        if (this.isPlay) {
          //暂停音频
          this.$audio.pause();
        } else {
          //播放音频
          this.$audio.play();
        }
        
      } else {
        //设置新的音频id
        //vuex, 修改音频id
        this.setAudioId({
          audioId: this.singerData.id,
          singerName: this.singerData.singerName,
          songName: this.singerData.name,
          singerPic: this.singerData.picUrl
        });
      }

    },
  }
}
</script>

<style lang="less" scoped>
.singer-item {
  display: flex;
  padding: 10px;
  color: #FFFEFF;
  background-color: #160742;
  margin-bottom: 10px;
  align-items: center;

  .s-name {
    margin-left: 10px;
  }

  .s-img {
    width: 40px;
    height: 40px;
    background-color: #ddd;

  }

  .pi {
    width: 24px;
    height: 24px;
    background-color: #52FFF5;
    margin-left: auto;
    text-align: center;
    border-radius: 50%;

    >span {
      font-size: 14px;

      line-height: 24px;
    }
  }
}
</style>